<template>
	<div>
		<masonry :cols="{default: 4, 1000: 3, 768: 1}" :gutter="{default: '30px', 768: '5px'}">
			<a v-for="(item, index) in list" :key="index" href="javascript:void(0)" @click="detail(item)">
				<goods-item :item="item"></goods-item>
			</a>
		</masonry>

		<!-- 点击商品后弹框 -->
		<el-dialog :visible.sync="dialogFormVisible" width="60%" top="4vh" :show-close="true">
			<el-row id="goods-recommend">
				<el-col :span="18">
					<div class="div-main-image">
						<el-image :src="activeImg" fit="fit"></el-image>
					</div>
					<div style="padding: 12px;">
						<span class="title">
							<!-- userType 0:淘宝 1:天猫 -->
							<span title="天猫" class="hidden gicon" v-if="activeItem.userType==1"></span>
							{{activeItem.title}}
							<span class="pull-right">月销 {{activeItem.volume}} 件</span>
						</span>
					</div>
				</el-col>
				<el-col :span="6">
					<el-row style="padding: 5px 0 0 5px;">
						<el-col :span="12" v-for="url in activeItem.smallImages" :key="url">
							<a href="javascript:void(0)" @click="activeImg=url">
								<el-image class="small-image" :src="url" fit="fit"></el-image>
							</a>
						</el-col>
						<el-col :span="12">
							<a href="javascript:void(0)" @click="activeImg=activeItem.pictUrl">
								<el-image class="small-image" :src="activeItem.pictUrl" fit="fit"></el-image>
							</a>
						</el-col>
					</el-row>

					<el-row class="item-info">
						<el-col :span="12">
							<span :class="[{'text-del':activeItem.couponAmount!=''}]">现价 ￥{{activeItem.zkFinalPrice}}</span>
						</el-col>
						<el-col :span="12" v-if="activeItem.couponAmount != ''" class="align-right">
							<span class="color-red">券 ￥{{activeItem.couponAmount=='' ? 0 : activeItem.couponAmount}}</span>
						</el-col>
						<el-col :span="12" v-if="activeItem.couponAmount != ''">
							<span>券后 ￥{{activeItem.money}}</span>
						</el-col>
						<el-col :span="12" class="align-right">
							<span class="color-green">返 ￥{{activeItem.fanli}}</span>
						</el-col>
						<el-col>
							<a class="el-button el-button--success el-button--mini width-100" target="_blank" :href="activeItem.couponClickUrl">去购买</a>
						</el-col>
						<el-col>
							<a class="el-button el-button--danger el-button--mini width-100" href="javascript:void(0)" v-clipboard:copy="tkl"
							 v-clipboard:success="onCopy" v-clipboard:error="onError">
								{{tkl}}一键复制淘口令
							</a>
						</el-col>
					</el-row>
				</el-col>
			</el-row>

			<el-row class="item-info">
				<br />
				<el-divider>
					<span class="recommend-title">为您推荐</span>
				</el-divider>
				<br />
				<masonry :cols="{default: 4, 1000: 3, 768: 1}" :gutter="{default: '30px', 768: '5px'}">
					<a v-for="(item, index) in recommend" :key="index" href="javascript:void(0)" @click="detail(item)">
						<goods-item :item="item"></goods-item>
					</a>
				</masonry>
			</el-row>
		</el-dialog>

	</div>
</template>

<script>
	import GoodsItem from '@/components/GoodsItem.vue'

	export default {
		name: 'goods',
		components: {
			GoodsItem
		},
		data() {
			return {
				dialogFormVisible: false,
				activeImg: null,
				activeItem: {},
				tkl: '',
				recommend: []
			}
		},
		props: {
			list: Array
		},
		methods: {
			detail(item) {
				this.activeItem = null;
				this.activeItem = item;
				// this.activeItem.smallImages.unshift(this.activeItem.pictUrl);

				this.getTkl(item);

				this.dialogFormVisible = true;

				this.$api.goods.recommend(1, this.activeItem.itemId).then(data => {
					this.recommend = data; //推荐列表
				});
			},
			//获取淘口令
			getTkl(item) {
				this.$api.goods.tkl("https:" + item.couponClickUrl).then(data => {
					this.tkl = data.model.match(/￥(\S*)￥/)[0]; //提取淘口令
				});
			},
			// 复制成功
			onCopy(e) {
				this.$message({
					message: '淘口令复制成功，打开手机淘宝购买吧',
					type: 'success'
				});
			},
			// 复制失败
			onError(e) {
				this.$message.error('出错了，请重试');
			},
			changeActiveItem(item) {
				this.activeItem = item;
			}
		},
		watch: {
			activeItem(val) {
				this.activeImg = val.pictUrl;
				this.getTkl(val);
			}
		}
	}
</script>

<style>
	.el-dialog__body {
		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .02), 0 16px 32px 0 rgba(0, 0, 0, .07);
	}

	.el-dialog__header {
		/* display: none; */
	}

	.div-main-image {
		background: url('../assets/img/bg/img_bg_2.png') 0 0 repeat;
		text-align: center;
		padding: 0 20px;
	}

	.small-image {
		background: url('../assets/img/bg/img_bg_2.png') 0 0 repeat;
		margin: 0 5px 5px 0;
	}

	.el-image {
		padding: 0;
	}

	.item-info {
		padding: 5px;
	}

	.item-info .el-col {
		padding-bottom: 10px;
	}

	.recommend-title {
		font-size: 20px;
		font-style: italic;
		color: #f56c6c;
	}
</style>
